import React from 'react';
import { Form, Input, Modal, Select } from 'antd';
const { Option } = Select;
const FormItem = Form.Item;

const CreateForm = props => {
  // 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建
  const [form] = Form.useForm();
  // 把父组件方法和属性传递过来到子组件
  const { modalVisible, onSubmit: handleAdd, onCancel } = props;
  // 点击确定的增加方法，里面调用了父组件的方法 触发表单验证收集value值
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    // console.log(form,fieldsValue)
    form.resetFields();
    // 利用父组件传递过来的方法，顺便传此子组件的值。进行调用
    handleAdd(fieldsValue);
  };

  return (
    // 弹出对话框 destroyOnClose关闭时销毁model子元素 //onok点击确定回调
    <Modal
      destroyOnClose
      title="新建班级"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form form={form}>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="班级代码"
          name="acount"
          rules={[{ required: true, message: 'Please input your message!' }]}

        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="班级年纪"
          name="name"
          rules={[{ required: true, message: 'Please input your message!' }]}

        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="班级名称"
          name="jobnum"
          rules={[{ required: true, message: 'Please input your message!' }]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="负责教师"
          name="type"
          rules={[{ required: true, message: 'Please input your message!' }]}

          shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}

        >

          <Select placeholder="Please select a option" defaultValue="1" showSearch optionFilterProp="children"
          filterOption={(input, option) =>
            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
          }
          >
            <Option value="1">张三+123zh</Option>
            <Option value="2">李四</Option>
            <Option value="3">教师5</Option>
          </Select>
        </FormItem>
      
      
      
      </Form>
    </Modal>
  );
};

export default CreateForm;
